<template>
    <div>
        <div id="box1">

        </div>
    </div>
</template>

<script setup lang='ts'>
// 导入权限页面判断
import { nopermission } from '@/utils/nopermission';
nopermission();

// 引入下载好的echarts 可视化图表
//as 表示起别名
import * as echarts from 'echarts';
import { onMounted } from 'vue'

onMounted(() => {
    //01: 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('box1'));
    //02: 绘制图表
    myChart.setOption({
        title: { // 设置图表的标题
            text: '学生成绩',
            textStyle: {
                color: 'red'
            },
            subtext: '2308班级',
            left: 'left'
        },
        tooltip: {}, // 设置提示框
        legend: { // 图例 (当一个容器中有多个图的时候)
            data: ['技能成绩', '理论成绩']
        }, //图例
        toolbox: { // 工具箱
            feature: {
                saveAsImage: {
                    name: 'abc'
                },
                restore: {},
                dataView: {},
                dataZoom: {},
                magicType: {
                    type: ['line', 'bar', 'stack']
                }
            }
        },
        xAxis: { // x轴
            data: [{
                value: '石昊翔',
                textStyle: {
                    fontSize: 20,
                    color: 'red'
                }
            }, '刘潇', '马琛', '李红乐', '冯超凡', '张义山']
        },
        yAxis: {}, // y轴
        series: [ // 系列数据
            {
                name: '技能成绩',
                type: 'bar',
                data: [60, 45, 50, 70, 85, 30]
            },
            {
                name: '理论成绩',
                type: 'line',
                data: [30, 60, 80, 20, 50, 100]
            }
        ]
    });
})


</script>
<style scoped>
#box1 {
    width: 500px;
    height: 500px;
    border: 1px solid black;
}
</style>